const APP_ENV_DEV = false // true 开发环境， false 生产环境 
const { createApp, ref, toRefs, reactive, onMounted } = Vue
const { ElMessage } = ElementPlus

// 后端接口配置
const apiInfo = {
    url: "./jd",
    config: {
        headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' }
    }
}

createApp({
    setup() {
        const state = reactive({
            // 表单数据 唯一 id 字段名称 (新建时 id 为空， 编辑时 id 不为空)
            // formIdAttr:'',
            // 表单设置信息
            formData: [],
            // 表单数据 (保存时需要哪些特殊参数如 TreeNodeId, 直接封装在form表单数据里， 保存时表单里就有该值了)
            form: {},
            // 表单保存接口 cmd
            saveFormCmd: '',
            // 表单删除接口 cmd
            deleteFormCmd: '',
            // 当前节点名称的字段名 (该字段名取值form里，保存成功后会返给父窗口)
            nodeNameAttr: '',
            // 表单规则
            rules: {},
        })
        
        // form表单类型映射
        const formType = ref({
            'AWSUI.ComboBox': 'select',
            'AWSUI.Text': 'input',
            'AWSUI.Textarea': 'textarea',// 待确认
            'date': 'date'// 待确认
        })

        const formRef = ref()
        const isDev = APP_ENV_DEV

        const { formData, form, saveFormCmd, deleteFormCmd, nodeNameAttr, rules } = toRefs(state)

        // 下拉框数据 根据 value 获取 label
        const findSelectLabel = (options, value) => {
            return options.find(item => item.value === value).label
        }

        // 表单验证
        const validateForm = (formEl) => {
            if (!formEl) return
            
            return new Promise((resolve, reject) => {
                formEl.validate((valid) => {
                    if (valid) {
                        console.log(JSON.stringify(form.value))
                    }
                    resolve(valid)
                })
            })
        }

        // 提交表单 通信方式 iframe 直接通信
        const submitForm = async (formEl) => {
            const valid = await validateForm(formEl)
            if(valid) {
                // 表单验证成功时
                console.log(JSON.stringify(form.value))

                const flag = await saveFormData()
                if(flag) {
                    // 表单保存成功后返给父窗口节点名称
                    return form.value[nodeNameAttr.value]
                } else {
                    // 表单保存失败时返回空内容
                    return ''
                }
            } else {
                // 表单验证失败时返回空内容
                return ''
            }
        }
        
        // 重置
        const resetForm = (formEl) => {
            if (!formEl) return
            formEl.resetFields()
        }

        // 保存表单
        const saveFormData = async () => {
            try {
                let res = null
                const data = {
                    sid: sid,
                    cmd: saveFormCmd.value,
                    formData: JSON.stringify(form.value)
                }
                if(APP_ENV_DEV) {
                    // 开发环境 测试mock
                    res = await axios.get('./mock/testSaveForm.json', { params: data })
                } else {
                    // 生产环境 后端接口
                    res = await axios.post(apiInfo.url, data, apiInfo.config)
                }
                
                if(res.data.result === "ok") {
                    console.log('保存成功')
                    return true
                } else {
                    console.log('保存失败')
                    return false
                }
            } catch(error) {
                console.log(error)
                return false
            }
        }

        // 删除表单
        const deleteForm = async () => {
            try{
                let res = null
                const data = {
                    sid: sid,
                    cmd: deleteFormCmd.value,
                    formData: JSON.stringify(form.value)
                }
                if(APP_ENV_DEV) {
                    // 开发环境 测试mock
                    res = await axios.get('./mock/testSaveForm.json', { params: data })
                } else {
                    // 生产环境 后端接口
                    res = await axios.post(apiInfo.url, data, apiInfo.config)
                }
                
                if(res.data.result === "ok") {
                    console.log('删除成功')
                    return form.value[nodeNameAttr.value]
                } else {
                    console.log('删除失败')
                    return ''
                }
            } catch(error) {
                console.log(error)
                return ''
            }
        }

        // 初始化数据
        const init = async () => {
            // 表单 id 字段
            // formIdAttr.value = formInfo.formIdAttr
            // 表单设置信息
            formData.value = formInfo.formData
            // 表单数据
            form.value = formInfo.form
            // 表单保存接口 cmd
            saveFormCmd.value = formInfo?.saveFormCmd || ''
            // 表单删除接口 cmd
            deleteFormCmd.value = formInfo?.deleteFormCmd || ''
            // 当前节点名称的字段名
            nodeNameAttr.value = formInfo?.nodeNameAttr || ''

            if(!saveFormCmd.value) {
                ElMessage.error('"saveFormCmd" 字段缺失')
            }
            if(!deleteFormCmd.value) {
                ElMessage.error('"deleteFormCmd" 字段缺失')
            }
            if(!nodeNameAttr.value) {
                ElMessage.error('"nodeNameAttr" 字段缺失')
            }
        }

        onMounted(() => {
            if(APP_ENV_DEV) {
                // 本地开发环境
                sid = '123'
                formInfo = {}
                axios.get('./mock/testFormData.json').then((res) => {
                    formInfo = res.data.data
                    init()
                })
            } else {
                // 生产环境 
                formInfo = JSON.parse(formInfo)
                init()
            }
        })

        // 通信方式 iframe 直接通信 (子页面注册方法)
        window.onSaveForm = async () => {
            return await submitForm(formRef.value)
        }
        window.onDeleteForm = async () => {
            return await deleteForm()
        }
        // 向父窗口注册方法(子页面对应的方法名称)
        window.parent?.TreeComponentApi?.registerAction("onNodeSave", "onSaveForm")
        window.parent?.TreeComponentApi?.registerAction("onNodeRemove", "onDeleteForm")


        /* 通信方式 iframe 直接通信 (子页面注册方法)
        window.registerChildApi = {
            // 获取表单数据
            onSaveForm: async () => {
                return await submitForm(formRef.value)
            },
            // 表单重置
            onResetForm: () => {
                resetForm(formRef.value)
            },
            // 删除表单时 返回模板集编码
            onRemoveFormData: () => {
                return form.value.modelSetNo
            }
        }
        // 向父窗口注册方法(子页面对应的方法)
        window.parent.TreeComponentApi = {
            "onNodeSave":window.registerChildApi.onSaveForm,
            "onResetForm": window.registerChildApi.onResetForm,
            "onRemoveFormData": window.registerChildApi.onRemoveFormData
        }*/

        return {
            formRef,
            formData,
            form,
            rules,
            isDev,
            formType,
            submitForm,
            resetForm
        }
    }
}).use(ElementPlus).mount('#app')